

<template>
  <el-container>
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p>欢迎使用砥砺云客系统</p>
    </el-aside>

    <el-main>
      <p class="loginTitle">欢迎登录</p>
      <el-form :model="user" status-icon :rules="rules" ref="userRef" label-width="100px" class="demo-user">
        <el-form-item label="账号" prop="loginAct">
          <el-input type="text" v-model="user.loginAct" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="user.loginPwd" autocomplete="off"></el-input>
          <el-form-item >
            <el-button type="primary" @click="userLogin()">登录</el-button>
          </el-form-item>
        </el-form-item>
        <el-checkbox v-model="remember">记住我</el-checkbox>
      </el-form>
    </el-main>

  </el-container>
</template>
<script>

import {doPost} from "../https/httpUtils.js";
import { ElMessage } from 'element-plus'
import {messageTips} from "../utils/messageUtil.js";
export default {
  name: "LoginView",
  data(){

    return{
      user:{
        loginAct:'',
        loginPwd:''
      },
      remember:false,
      rules:{
        loginAct: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '密码长度不能小于8位或者大于16位', trigger: 'blur' },
        ],
      }
    }

  },
  methods:{
     userLogin(){

       this.$refs.userRef.validate((valid)=> {
         let formData = new FormData()
         formData.append('loginAct',this.user.loginAct)
         formData.append('loginPwd',this.user.loginPwd)
         if (valid){
          messageTips('登录成功','success')
          doPost('/user/login',formData).then((res)=> {

                  console.log(res)
              }

          )
         }
         messageTips('登录失败','error')


       })
     }
  }
}
</script>
<style scoped>
.loginTitle{
  text-align: center;
  font-size: 20px;
  color: black;
}
.el-aside{
  width: 40%;
  background-color: rgb(33, 27, 27);
  height: 100vh;
}
img{
  margin-top: 100px;
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
}
p{
  font-weight:bolder;
  color: white;
  text-align: center;
  font-size: 30px;
}
.el-main{
  margin-top: 200px;
  margin-left: 300px;
  margin-right: 300px;

}
.el-form-item{
  font-weight: bolder;
  width: 500px;

}
.el-button{
  width: 400px;
  margin-top: 15px;
}
.el-checkbox{
  margin-left: 120px;
}

</style>